<template>
	<view class="container">
		<view class="info-wrap" v-if="info && type == 'card'">
			<view class="header">会员卡项</view>
			<view class="headimg-content">
				<view class="headimg">
					<image :src="info.headimg ? $util.img(info.headimg) : $util.img(defaultImg.head)"
						@error="info.headimg = defaultImg.head"></image>
				</view>
				<view class="header-info">
					<view class="name">
						{{ info.nickname }}
						<text v-if="info.member_level">{{ info.member_level_name }}</text>
					</view>
					<view class="header-info-item">
						<view>电话：{{ info.mobile }}</view>
						<view>性别：{{ info.sex == 0 ? '未知' : info.sex == 1 ? '男' : '女' }}</view>
						<view>生日：{{ info.birthday && memberInfo.birthday ? memberInfo.birthday : '--' }}</view>
						<view>注册时间：{{ info.reg_time | timeFormat }}</view>
					</view>
				</view>
			</view>
			<view class="member-card-wrap">
				<view class="common-tab-wrap" id="tab">
					<view class="tab-item active-bar"><text class="text">会员卡项</text></view>
					<view class="active" :style="activeStyle"></view>
				</view>
				<view class="card-wrap">
					<scroll-view scroll-y="true" class="card-list" @scrolltolower="getMemberCard()">
						<block v-if="memberCardData.list.length">
							<view class="card-item" :class="{ active: memberCardData.index == index }"
								v-for="(item, index) in memberCardData.list" :key="index"
								@click="selectMemberCard(item, index)">
								<view class="card-name">{{ item.goods_name }}</view>
								<view class="info">
									<view v-if="item.total_num > 0">可用{{ item.total_num - item.total_use_num }}次</view>
									<view v-else>不限次</view>
									<view v-if="item.end_time > 0">有效期：{{ $util.timeFormat(item.end_time, 'y-m-d') }}
									</view>
									<view v-else>长期有效</view>
								</view>
							</view>
						</block>
						<view v-else class="empty">
							<image :src="$util.img('public/uniapp/cashier/card_empty.png')" mode="widthFix"></image>
							<view class="tips">暂无可用卡项</view>
						</view>
					</scroll-view>
					<view class="item-list">
						<view class="title">
							<view>可用服务/商品</view>
							<view v-if="memberCardData.currData.card_type == 'commoncard'">
								以下服务/商品剩余可用
								<text
									class="num">{{ memberCardData.currData.total_num - memberCardData.currData.total_use_num }}</text>
								次
							</view>
						</view>
						<scroll-view scroll-y="true" class="item-wrap">
							<view class="uni-flex" v-if="memberCardData.currData.item_list">
								<view class="card-item" :class="{
										active: memberCardData.selected['item_' + item.item_id],
										'item-mum-1': itemNum == 1,
										'item-mum-2': itemNum == 2,
										'item-mum-3': itemNum == 3,
										'not-select': !checkStatus(item) && !memberCardData.selected['item_' + item.item_id]
									}" @click="selectMemberCardItem(item, index)" v-for="(item, index) in memberCardData.currData.item_list">
									<view class="image">
										<image :src="$util.img(item.sku_image, { size: 'small' })" mode="widthFix">
										</image>
									</view>
									<view class="info">
										<view>
											<view class="name">
												<text class="tag">{{ item.is_virtual ? '服务' : '商品' }}</text>
												{{ item.sku_name }}
											</view>
											<block v-if="memberCardData.currData.card_type != 'commoncard'">
												<view class="num" v-if="item.num > 0">剩余可用{{ item.num - item.use_num }}次
												</view>
												<view class="num" v-else>不限次</view>
											</block>
										</view>
										<view class="operation-wrap">
											<view class="price">
												<text class="util">￥</text>
												{{ item.price }}
											</view>
											<view class="number-wrap"
												v-if="memberCardData.selected['item_' + item.item_id]">
												<text class="iconfont iconjian"
													@click.stop="itemDec(memberCardData.selected['item_' + item.item_id])"></text>
												<input type="number"
													v-model="memberCardData.selected['item_' + item.item_id].input_num" />
												<text class="iconfont iconjia"
													@click.stop="itemInc(memberCardData.selected['item_' + item.item_id])"></text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="empty" v-else>
								<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix">
								</image>
								<view class="tips">暂无相关数据</view>
							</view>
						</scroll-view>
						<view class="button-wrap">
							<button type="default" class="primary-btn" :disabled="memberCardData.itemIndex == -1"
								@click="selectGoods()">加入购物车 [Enter]</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="coupon-box" v-if="info && type == 'coupon'">
			<i class="iconguanbi1 iconfont " @click="type = 'member'"></i>
			<view class="content-list">
				<view class="content-item" v-for="(item, index) in memberCoupon" v-if="memberCoupon.length > 0">
					<view class="item-title">{{ item.coupon_name }}</view>

					<view class="item-content" v-if="item.type == 'reward' || item.type == 'random'">
						<text>￥</text>
						{{ item.money }}
					</view>
					<view class="item-content" v-if="item.type == 'discount'">
						{{ item.discount }}
						<text>折</text>
					</view>

					<view class="item-line"></view>
					<view class="item-bottom">
						<view class="item-desc" v-if="item.type == 'reward' || item.type == 'random'">
							满{{ item.at_least }}可用</view>
						<view class="item-desc" v-if="item.type == 'discount'">
							满{{ item.at_least }}可用,最多优惠{{ item.discount_limit }}元</view>
						<view class="item-time">
							{{ $util.timeFormat(item.start_time) }}至{{ $util.timeFormat(item.end_time) }}</view>
					</view>
				</view>
				<view class="empty" v-if="memberCoupon.length == 0">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无优惠券</view>
				</view>
			</view>
		</view>

		<view class="coupon-box" v-if="info && type == 'hongbao'">
			<text class="iconguanbi1 iconfont " @click="type = 'member'"></text>
			<view class="content-list">
				<view class="content-item" v-for="(item, index) in memberHongbao" v-if="memberHongbao.length > 0">
					<view class="item-title">{{ item.name }}</view>
					<view class="item-content">
						<text>￥</text>
						{{ item.money }}
					</view>
					<view class="item-line"></view>
					<view class="item-bottom">
						<view class="item-time">
							{{ $util.timeFormat(item.start_time) }}至{{ $util.timeFormat(item.end_time) }}</view>
					</view>
				</view>
				<view class="empty" v-if="memberHongbao.length == 0">
					<image :src="$util.img('public/uniapp/cashier/goods_empty.png')" mode="widthFix"></image>
					<view class="tips">暂无红包</view>
				</view>
			</view>
		</view>

		<!-- 录入会员 -->
		<view class="form-box" v-if="!info && type == 'addmember'">
			<view class="header">录入会员</view>
			<view class="form-content">
				<view>
					<view class="form-item">
						<view class="form-label">
							<text class="required">*</text>
							手机号：
						</view>
						<view class="form-inline search-wrap"><input type="number" class="form-input"
								v-model="memberData.mobile" placeholder="请输入会员手机号" /></view>
					</view>

					<view class="form-item">
						<view class="form-label">
							<text class="required"></text>
							会员名称：
						</view>
						<view class="form-inline search-wrap"><input type="text" class="form-input"
								v-model="memberData.nickname" placeholder="请输入会员昵称" /></view>
					</view>

					<view class="form-item">
						<view class="form-label">
							<text class="required"></text>
							性别：
						</view>
						<view class="form-inline search-wrap"><uni-data-checkbox v-model="memberData.sex"
								selectedColor="#8558FA" :localdata="sex"></uni-data-checkbox></view>
					</view>

					<view class="form-item">
						<view class="form-label">
							<text class="required"></text>
							生日：
						</view>
						<view class="form-inline">
							<uni-datetime-picker :start="startDate" v-model="memberData.birthday" type="date"
								:clearIcon="false" @change="changeTime" />
						</view>
					</view>

					<view class="form-item">
						<view class="form-label">
							<text class="required"></text>
							会员等级：
						</view>
						<view class="form-inline">
							<select-lay :zindex="10" :value="memberData.member_level" name="names" placeholder="请选择会员等级"
								:options="memberLevelList" @selectitem="selectMemberLevel"></select-lay>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-label"></view>
					<view class="form-inline">
						<button type="primary" class="primary-btn" @click="addMember">确定录入</button>
						<button type="primary" class="default-btn" @click="type = 'member'">返回搜索</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniDataCheckbox from '@/components/uni-data-checkbox/uni-data-checkbox.vue';
	import ncMember from './nc-member.js';

	export default {
		components: {
			uniDataCheckbox
		},
		name: 'ncMember',
		props: {},
		mixins: [ncMember],
		computed: {
			info() {
				if (this.memberInfo) this.type = 'card';
				return this.memberInfo;
			}
		},
		watch: {
			info: function(nVal, oVal) {
				if ((nVal && !oVal) || (nVal && oVal && nVal.member_id != oVal.member_id) || !nVal) {
					this.memberCardData.page = 0;
					this.memberCardData.index = 0;
					this.memberCardData.list = [];
					this.memberCardData.currData = {};
					this.memberCardData.selected = {};
					if (nVal) this.getMemberCard();
				}
			}
		}
	};
</script>

<style lang="scss">
	@import './nc-member.scss';
</style>